/* components */
import { SettingGPTViewDialog } from "@gpt/components"
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* vue */
import { defineComponent, PropType } from 'vue'
/* utils */
import { isFalsy } from "pub-bbx-utils";
import { isNotUndefined, isString } from "@src/util/type";

type SettingGPTViewDialogComponent = InstanceType<typeof SettingGPTViewDialog>

enum SettingGPTDingtalkAssistantDocDialogEventEnum {
  Input = 'input',
  Confirm = 'confirm'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTDingtalkAssistantDocDialog,
  props: {
    value: {
      type: String,
      default: ''
    },
    onInput: {
      type: Function
    },
    onConfirm: {
      type: Function
    }
  },
  data() {
    return {
      insideValue: '',
    }
  },
  computed: {
    title(): string {
      return '请填写钉钉的知识库链接：'
    },
    placeholder(): string {
      return '请填写钉钉的知识库链接'
    },
    model(): Record<string, any> {
      return {
        url: this.insideValue
      }
    },
    rules(): Record<string, any> {
      return {
        url: [
          { required: true, message: this.title, trigger: 'blur' },
          { required: true, message: this.title, trigger: 'change' }
        ]
      }
    },
    settingGPTViewDialogComponent(): SettingGPTViewDialogComponent {
      return this.$refs.SettingGPTViewDialog as SettingGPTViewDialogComponent
    }
  },
  watch: {
    value(value) {
      this.insideValue = value
    }
  },
  methods: {
    open(docUrl?: string) {
      
      if (isNotUndefined(docUrl) && isString(docUrl)) {
        this.insideValue = docUrl as string
      }
      
      this.settingGPTViewDialogComponent.open()
      
      setTimeout(() => {
        this.clearValidate()
      })
      
    },
    close() {
      this.settingGPTViewDialogComponent.close()
    },
    clear() {
      const emptyValue = ''
      this.onChangeHandler(emptyValue)
    },
    emitInput(value: string) {
      this.$emit(SettingGPTDingtalkAssistantDocDialogEventEnum.Input, value)
    },
    onChangeHandler(value: string) {
      
      // 只保留链接部分，去掉后面的参数
      if (value.includes('?')) {
        value = value.split('?')[0]
      }
      
      const _value = value.trim()
      this.insideValue = _value
      this.emitInput(_value)
    },
    onFormInputHandler() {
      
    },
    clearValidate() {
      // @ts-ignore
      this.$refs.url?.clearValidate()
      // @ts-ignore
      this.$refs.form?.clearValidate()
    },
    validate() {
      // @ts-ignore
      return this.$refs.form?.validate()
    },
    async onConfirmHandler() {
      
      const validated = await this.validate()
      
      if (isFalsy(validated)) {
        return
      }
      
      this.$emit(SettingGPTDingtalkAssistantDocDialogEventEnum.Confirm, this.insideValue)
      
    }
  },
  render() {
    
    const attrs = {
      props: {
        model: this.model
      }
    }
    
    return (
      <div class={ComponentNameEnum.SettingGPTDingtalkAssistantDocDialog}>
        <SettingGPTViewDialog
          width="500px"
          title="钉钉AI助理配置"
          ref="SettingGPTViewDialog"
          className={ComponentNameEnum.SettingGPTDingtalkAssistantDocDialog}
          onConfirm={this.onConfirmHandler}
        >
          <el-form 
            label-position="top"
            ref="form"
            rules={this.rules}
            {...attrs}
            onInput={this.onFormInputHandler}
            nativeOnSubmit={(event: any) => event.preventDefault()}
          >
            <el-form-item
              prop="url"
              ref="url"
              label={this.title}
            >
              <el-input
                maxlength={500}
                value={this.insideValue}
                placeholder={this.placeholder}
                clearable
                onClear={this.clear}
                onInput={this.onChangeHandler}
              />
            </el-form-item>
            <div class="setting-gpt-dingtalk-assistant-doc-dialog-tips">
              连接钉钉知识库后，AI引用知识库来源将来自钉钉知识库。
            </div>
          </el-form>
        </SettingGPTViewDialog>
      </div>
    )
  }
})